<!--添加项目-->
<template>
  <div class="containe">
    <!--  我的余额-->
    <el-row>
      <el-col :span="24">
        <el-card shadow="never" class="card">
          <el-row class="top">
            <el-col :span="19">
              一站式解决您的项目需求问题！
            </el-col>
            <el-col :span="5">
              <el-statistic title="累计录入" :value="outputValue"/>
            </el-col>
          </el-row>
          <el-row class="bottom">
            <el-col :span="24">
              <span style="color: #afacac">项目编号：{{ from.code }}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>


    <el-card shadow="never" class="card-content">
      <el-form
          ref="ruleFormRef"
          label-position="top"
          :model="from"
          label-width="auto"
          style="padding-top: 15px;width: 96%;margin: 0 auto"
          :rules="rules"
      >
        <el-form-item label="项目名称：" prop="projectName">
          <el-input
              v-model="from.projectName"
              maxlength="30"
              style="font-size:16px"
              show-word-limit
              placeholder="请输入您的项目名称"
          />
        </el-form-item>

        <el-form-item label="微信号码：" prop="wxCode">
          <el-input v-model="from.wxCode"
                    style="font-size:16px"
                    maxlength="30"
                    show-word-limit
                    placeholder="请输入您的微信号码"

          />
        </el-form-item>
        <el-form-item label="交付日期（不确定可不填写）：" prop="deliveryTime">
          <el-input
              v-model="from.deliveryTime"
              style="width: 100%;font-size:16px"
              placeholder="请选择日期"
              :suffix-icon="Calendar"
              @focus="data"
              clearable
              readonly
          ></el-input>

        </el-form-item>

        <el-form-item>
          <el-button class="btn" type="primary" @click="add(ruleFormRef)">提交 申请</el-button>
        </el-form-item>
      </el-form>
    </el-card>


    <div class="weui-footer" style="position: fixed;bottom: 5px;left: 20%">
      <p class="weui-footer__text">Copyright © 2022-2024 迅颖大数据</p>
    </div>
  </div>
</template>
<script setup lang="ts">
import {useHead} from '#app';
import {Calendar} from '@element-plus/icons-vue'
import {useTransition} from '@vueuse/core'

useHead({
  title: '项目创建 - 迅颖',
  meta: [
    {
      name: "viewport",
      content: "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    }, {
      name: "apple-mobile-web-app-capable",
      content: "yes"
    }
  ],
  link: [
    {rel: 'stylesheet', href: 'https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css'}
  ],
  script: [
    {
      src: 'https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js',
      type: 'text/javascript',
    },
  ]
});
import requester from "~/utils/request";
import {useRouter, useRoute} from "vue-router";
import {userStore} from "~/composables/useUserStore";

const router = useRouter()
const route = useRoute()
const store = userStore()
import type {FormRules, FormInstance} from 'element-plus'

const state = reactive({
  isKeyboardActive: false,
})
const source = ref(0)
const outputValue = useTransition(source, {
  duration: 15,
})
source.value = 265

interface ruleForm {
  code: string,
  projectName: string,
  deliveryTime: string,
  wxCode: string,
  userCode: string,
}

const from = reactive<any>({
  code: "",
  projectName: "",
  userCode: "",
})
const ruleFormRef = ref<FormInstance>()
//项目提交验证
const rules = reactive<FormRules<ruleForm>>({
  projectName: [
    {required: true, message: '项目名称不能为空', trigger: 'blur'}
  ],
})
//添加操作
const add = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      from.userCode = store.token.userCode
      requester.post("/api/project/enter", from).then((res: any) => {
        if (res.code === 200) {
          router.push(`projectAddSuccess?code=${from.code}`)
        }
        if (res.code === 300 || res.code === 310) {
          ElMessage({
            message: res.msg,
            type: 'error',
          })
        }
      })
    }
  })
}

function data() {
  weui.datePicker({
    start: 2024,
    end: 2026,
    onChange: function (result: any) {
      // console.log(result);
    },
    onConfirm: function (result: any) {
      from.deliveryTime = result[0].label + result[1].label + result[2].label
    },
    title: '请选择交付日期'
  });
}

onMounted(() => {
  //初始化
  init()
  silentLogin()
})
// function getCode() {
//   //拼接链接进行登录
//   window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx4754a2bb841ba595&redirect_uri=` +
//       encodeURIComponent("https://xunyingcloud.cn/my/mobile/projectAdd") +
//       "&response_type=code&scope=snsapi_userinfo&state=1&connect_redirect=1#wechat_redirect")
// }

// 生产环境
function getCode() {
  //拼接链接进行登录
  window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx4754a2bb841ba595&redirect_uri=` +
      encodeURIComponent("https://xunyingcloud.cn/my/mobile/projectAdd") +
      "&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect")
}
/**
 * 初始项目生成项目编号
 */
function init() {
  // 先查询是否登录
  if (store.isLogin) {
    return;
  }
  getCode()
  projectInfo()
}

function projectInfo(){
  const timestampInMilliseconds = Date.now();
  from.code = "X" + timestampInMilliseconds
  requester.get("/api/project/count").then(res => {
    source.value = res.data.count
  })
}
const silentLogin = async () => {
  const code = route.query.code
  //code换取登录信息
  requester.post('/api/login/codeLogin', {code: code, type: "snsapi_base"}).then((res: any) => {
    //40029code被使用
    //存储用户信息
    store.setToken(res.data)
    //设置登录状态
    store.isLogin = true
    projectInfo()
  })
}

</script>
<style scoped lang="scss">
.containe {
  height: 100vh;
  width: 100%;
}
.card {
  display: block;
  width: 95%;
  margin: 0 auto;
  height: 100px;
  margin-bottom: 5px;
  background: linear-gradient(to bottom, #e2f6fe, #d8eefc);
  color: #010111;
  .top {
    line-height: 20px;
    height: 80%;
    font-size: 17px;
  }
  .bottom {
    padding-top: 5px;
    height: 20%;
    font-size: 12px;
  }
}
.card-content {
  display: block;
  width: 95%;
  margin: 0 auto;
}
:deep(.el-card__body) {
  padding-bottom: 0px;
}

.btn {
  color: #0c0c0c;
  font-weight: 500;
  display: block;
  margin: 0 auto;
  width: 65%;
  background: linear-gradient(to bottom, #e3f6fe, #f9f7fc);
}

:deep(.el-button--primary) {
  --el-button-border-color: white;
}
</style>
